<template>
    <div class="community-container">
        <FilterSearch
            :searchItems="searchItems"
            @query="handleQuery"
        />
        <AutoTable
            :tableData="tableData"
            :columns="columns"
            @operate="handleOperate"
        />
        <Pagination
            :total="total"
            :pageSize="pageSize"
            :currentPage="currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <CommunityDialog
            :visible="dialogVisible"
            :post="dialogPost"
            @close="beforeClose"
        />
    </div>
</template>
<script setup>
import './index.css';
import { reactive, ref, markRaw } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { View, Delete, Switch } from '@element-plus/icons-vue'

import FilterSearch from '@/components/filterSearch/index.vue';
import AutoTable from '@/components/autoTable/index.vue';
import Pagination from '@/components/pagination/index.vue';
import CommunityDialog from '@/components/communityDialog/index.vue';

import { communityApi } from '@/api';

// FilterSearch params
const searchItems = ref([
    {
      label: '用户名称',
      vModel: 'user_name',
      type: 'input',
      initialValue: ''
    },
    {
      label: '话题',
      vModel: 'topic',
      type: 'input',
      initialValue: ''
    },
    {
      label: '相关活动',
      vModel: 'related_activity',
      type: 'input',
      initialValue: ''
    },
    {
      label: '相关课程',
      vModel: 'related_course',
      type: 'input',
      initialValue: ''
    }
]);
const searchCache = ref({});


// AutoTable params
const tableData = ref([]);
const columns = ref([
    {
      label: '用户名称',
      prop: 'user_name',
      width: '140px'
    },
    {
      label: '话题',
      prop: 'topic',
      width: '180px'
    },
    {
      label: '喜欢人数',
      prop: 'likes_count',
      type: 'input',
      width: '120px'
    },
    {
      label: '评论人数',
      prop: 'comments_count',
      type: 'input',
      width: '120px'
    },
    {
      label: '创建时间',
      prop: 'create_time',
      type: 'date',
      format: 'YYYY-MM-DD HH:mm:ss',
      width: '250px'
    },
    {
      label: '是否置顶',
      prop: 'is_top',
      type: 'switch',
      width: '140px'
    },
    {
      label: '操作',
      prop: 'operate',
      fixed: 'right',
      type: 'action',
      align: 'left',
      width: '140px',
      operate: [
        {label: '详情', type: 'view', icon: markRaw(View)},
        {label: '删除', type: 'delete', icon: markRaw(Delete)},
        {label: '置顶/取消', type: 'switch', icon: markRaw(Switch)}
      ]
    }

]);

// Pagination params
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);

// Dialog params
const dialogVisible = ref(false);
const dialogPost = ref({});

// filterSearch Api
const handleQuery = async (params) => {
    // 调用接口获取数据
    searchCache.value = params;
    const reqParams = {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        ...params
    }
    const res = await communityApi.getCommunity(reqParams);
    if (res.code === 200) {
      tableData.value = res.data.rows;
      total.value = res.data.total;
    }
};

// Pagination Api
const handleSizeChange = (size) => {
    pageSize.value = size;
    handleQuery(searchCache.value);
};
const handleCurrentChange = (page) => {
    currentPage.value = page;
    handleQuery(searchCache.value);
};

// AutoTable Api
const handleOperate = (type, row) => {
    if (type === 'view') {
        dialogVisible.value = true;
        dialogPost.value = row;
    }
    else if (type === 'delete') {
      handleDelete(row);
    }
    else if (type === 'switch') {
      handleSwitch(row);
    }
}
const handleDelete = async (row) => {
    ElMessageBox.confirm('确定删除该帖子吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        const res = await communityApi.deleteCommunity(row._id);
        if (res.code === 200) {
            ElMessage.success('删除成功');
            handleQuery(searchCache.value);
        }
    });
}

const handleSwitch = async (row) => {
    const isTop = row.is_top;
    const action = isTop ? '取消置顶' : '置顶';
    ElMessageBox.confirm(`确定${action}该帖子吗？`, `${action}确认`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        const res = await communityApi.pinPost({id: row._id, is_top: !isTop});
        if (res.code === 200) {
            ElMessage.success(`${action}成功`);
            handleQuery(searchCache.value);
        }
    });
}
// Dialog Api
const beforeClose = () => {
    dialogVisible.value = false;
};


</script>